<template>
  <div v-if="isDetail">
    <!--图片展示-->
    <swiper :list="demo01_list" height="360px" v-model="demo01_index" :min-moving-distance="120" @on-index-change="demo01_onIndexChange"></swiper>
    <flexbox orient="vertical" style="width: 95%;margin: 10px auto;">
      <flexbox-item><div class="flex-demo">
        <div class="detail-text">
          <div class="text-name">
            <h4 class="name-left">{{goods.goods_name}}</h4>
            <!--<div class="name-right"><img src="http://dlhz.oss-cn-beijing.aliyuncs.com/supply-app-img/love.png" style="height:1.3rem;"/><p>收藏</p></div>-->
            <div class="name-right"><i class="iconfont icon-shoucang"></i></div>
          </div>
          <div class="text-price">
            <span class="price-left">￥<span style="font-weight: 700;font-size:1.2rem;">0.00</span></span>
            <span class="price-right">已售{{goods.sales_num}}盒</span>
          </div>
        </div>
      </div></flexbox-item>
      <flexbox-item><div class="flex-demo">
        <group gutter="0">
          <cell title="规格" is-link style="background: #fff;" :value="norm" @click.native="clickShowGui"></cell>
        </group>
      </div></flexbox-item>
    </flexbox>
    <!--规格-->
    <div v-transfer-dom>
      <popup v-model="showGui" height="70%" style="border-top-left-radius: 5px;border-top-right-radius: 5px;background: #fff;">
        <shoppingAdd v-if="showGui" v-bind:detail="goods" @isShowGui="getShowGui"></shoppingAdd>
      </popup>
    </div>
    <!--tab选项卡-->
    <tabbar style="position: fixed">
      <div class="tab-item shop"><i class="iconfont icon-dianpu" style="font-size: 1.2rem;"></i><p>店铺</p></div>
      <div class="tab-item cart"><i class="iconfont icon-daohanggouwuche" style="font-size: 1.2rem;"></i><p>购物车</p></div>
      <div class="tab-item shopping">
        <span class="shopping-right">立即购买</span>
        <span class="shopping-left" @click="clickShowGui">加入购物车</span>
      </div>
    </tabbar>
    <toast v-model="showPositionValue" type="text" :time="1000" is-show-mask :text="toastMsg" :position="position"></toast>
  </div>
</template>

<script>
  import shoppingAdd from './Shopping-add'
  import { Swiper, Group, Tabbar, TabItem, Cell, Flexbox, FlexboxItem, Popup, PopupHeader } from 'vux'
  export default {
    name: "",
    components: {
      Swiper, Group, Tabbar, TabItem, Cell, Flexbox, FlexboxItem, Popup, PopupHeader, shoppingAdd
    },
    props:['supplyId','state'],
    data () {
      return {
        demo01_list: [],
        demo01_index:0,
        goods:{},
        isDetail:false,
        norm:'请选择规格',
        title:'规格详情',
        showGui:false,

        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',
      }
    },
    mounted(){
      if(this.goodsId) this.getGoodsDetail(this.goodsId)
      $(".child-view").css({overflow:'scroll'})
    },
    methods:{
      // 轮播图
      demo01_onIndexChange (index) {
        this.demo01_index = index
      },
      // 选择规格
      clickShowGui(){
        this.showGui = true
      },
      getShowGui(msg){
        this.showGui = msg
      },
      // 获取商品详情
      getGoodsDetail(goodsId){
        this.$vux.loading.show({
          text: 'Loading'
        });
        this.config1.post('/purchasers/app/goods/findById', {id:goodsId}).then(res=>{
          if(res.data.code==0){
            this.$vux.loading.hide();
            this.goods = res.data.goods
            $.each(res.data.goods.imgList,(index,item)=>{
              item.img = this.config1.fileUrl+item.img_url
              this.demo01_list.push(item)
            })
            this.isDetail = true
          }else{
            this.$vux.loading.hide();
            this.msg(res.data.message);
          }
        }).catch(err=>{
          this.$vux.loading.hide();
          this.msg('网络错误');
        })
      },
      // 信息提示
      msg(str){
        this.showPositionValue = true;
        this.position = 'middle';
        this.toastMsg = (str);
      },
    }
  }
</script>

<style scoped>
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .flex-demo {
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    background-clip: padding-box;
    box-shadow: 0 0 8px #bbbbbd;
    overflow: hidden;
  }
  .detail-text{
    background: #fff;
    padding:0 10px 5px;
    overflow: hidden;
    border-radius: 4px;
    font-family: 微软雅黑;
    border-bottom: 1px #f7f7f7 solid;
  }
  .text-name{
    padding-top:20px;
  }
  .name-left{
    width: 90%;
    float: left;
    line-height:22px;
  }
  .name-right{
    width: 10%;
    float: right;
    text-align: centers;
    font-size:1.4rem;
    color:#777777;
  }
  .text-price{
    clear: both;
    line-height:25px;
  }
  .price-left{
    color: #d80609;
  }
  .price-right{
    float: right;
    color:#999;
    font-size:0.6rem;
  }
  .tab-item{
    display: inline-block;
  }
  .shop,.cart{
    font-size: 0.6rem;
    color:#999;
    padding-top:5px;
  }
  .shop{
    width:20%;
    text-align: center;
  }
  .cart{
    width: 15%;
    text-align: center;
  }
  .shopping{
    width: 65%;
    text-align: right;
    line-height:45px;
  }
  .shopping-left,.shopping-right{
    display: block;
    float: right;
    font-size: 1rem;
    color:#fff;
    background: #ffc655;
    padding:0 15px;
  }
  .shopping-right{
    background: #33bb99;
    padding:0 20px;
  }
</style>
